<template>
  <view class="login-box h-screen bg-no-repeat bg-cover relative">
      <view class="p-3 absolute bottom-10" v-show="!coverLogin">
        <view class="text-2xl text-white">
          即时咨询
        </view>
        <view class="text-xs text-white mt-3">
          24小时热门资讯，带您了解全球最新动态，随时了解实时资讯，内容丰富，满足您各领域的信息资讯，使用起来吧
        </view>
        <view class="flex mt-2">
          <nut-button type="default" class="flex-1 m-2">注册</nut-button>
          <nut-button type="info"  class="flex-1 m-2" @click="showLogin">登录</nut-button>
        </view>
      </view>
      <view :class="fadeAnimate ? 'FriendUrlCreateWindowFadeIn' : 'FriendUrlCreateWindowFadeOut'" class="login-box-content" v-show="coverLogin" ref="target">

      </view>
    <i class="iconfont icon-icon-APP_xiazai text-white" @click="closeLogin" style="position: absolute;top: 10px">

    </i>
  </view>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import {onMounted, ref} from "vue";
import { onClickOutside } from '@vueuse/core'
const coverLogin = ref(false)
const fadeAnimate = ref(false)
const target = ref(null)
onMounted(()=>{

})
const showLogin = ()=>{
  coverLogin.value = true;
  fadeAnimate.value = true;
}
onClickOutside(target, (event) => {
  closeLogin()
})

const closeLogin = ()=>{
  fadeAnimate.value = false;
  setTimeout(()=>{
    coverLogin.value = false;
  },200)
}

</script>

<style scoped lang="scss">
.login-box{
  font-family: monospace;
  background: url("../../assets/image/city-gfce2a80c9_1920.jpg");
  background-size: 100% 100%;
}
.login-box-content{
  height: 80vh;
  background: white;
  width: 100%;
  position: absolute;
  bottom: 0;
}
.FriendUrlCreateWindowFadeIn{
  animation: FadeIn 0.2s linear;
}
.FriendUrlCreateWindowFadeOut{
  animation: FadeOut 0.2s linear;
}

@keyframes FadeIn{
  0% {transform: scale(0.9)}
  20% {transform:scale(0.925)}
  60% {transform:scale(0.95)}
  80% {transform:scale(0.975)}
  100% {transform:scale(1)}
}

@keyframes FadeOut{
  0% {transform: scale(1)}
  20% {transform:scale(0.975)}
  60% {transform:scale(0.95)}
  80% {transform:scale(0.925)}
  100% {transform:scale(0.9)}
}
</style>
